<template>
  <div class="wrapper" style="padding:15px 10px 15px 28px;height: 600px;">
    <!-- 不知道搜索什么-->
<!--    <el-input class="my-3" style="width: 254px;" placeholder="请输入搜索内容" size="small" v-model="searchTxt">-->
<!--      <el-button slot="append" class="ur-btn ur-btn-search"><i class="iconfont icon-sousuo mr-0" style="width: 14px;height: 14px;"></i></el-button>-->
<!--    </el-input>-->

    <el-autocomplete class="my-3" size="small" popper-class="my-autocomplete" v-model="searchTxt" placeholder="请输入内容" style="width: 265px;"
      :fetch-suggestions="querySearch" @select="handleSelect" :hide-loading="true">
      <i class="iconfont icon-sousuo mr-0" style="width: 14px;height: 14px;" slot="suffix"></i>
      <div v-if="item.Name" slot-scope="{item}">
        <div>{{ item.Name }}</div>
      </div>
    </el-autocomplete>

<!-- 线路控制-->
    <div class="d-flex align-items-center titleMark">
      <i class="iconfont icon-title mr-0"></i>
      线路控制
      <i class="iconfont icon-title mr-0"></i>
    </div>
   <!-- <ul class="d-flex switchGroup justify-content-around align-items-center my-3" >
      <li class="txt_blue">全关</li> <li class="txt_blue">全开</li>
    </ul>-->
    <!--<ul class="d-flex switchGroup justify-content-around my-3" :class="[`${'switchBg'+onOffType}`]">
      <li style="width: 40%" @click="switchClick(0)"></li>&lt;!&ndash;全关&ndash;&gt;
      <li style="width: 20%" @click="switchClick(2)"></li>&lt;!&ndash;中立&ndash;&gt;
      <li style="width: 40%" @click="switchClick(1)"></li>&lt;!&ndash;全开&ndash;&gt;
    </ul>-->
    <ul :class="[`${'switchBg'+onOffType}`]" class="d-flex switchGroup justify-content-around my-3">
      <li :class="{'notAllowed':btnState}" @click="lineCtrl(0)" style="width: 40%"></li><!--全关-->
      <li :class="{'notAllowed':btnState}" @click="lineCtrl(2)" style="width: 20%"></li><!--中立-->
      <li :class="{'notAllowed':btnState}" @click="lineCtrl(1)" style="width: 40%"></li><!--全开-->
    </ul>
    <ul class="d-flex  flex-wrap tagGroup">
      <li v-for="index in 8" @click="lineSelect(index)" :class="{active:lineNos.includes(index)}">线路{{lineObj[index]}}</li>
    </ul>

<!--    单灯控制-->
    <div class="d-flex align-items-center titleMark mt-2">
      <i class="iconfont icon-title mr-0"></i>
      单灯控制
      <i class="iconfont icon-title mr-0"></i>
    </div>
    <el-select size="small" class="my-3" style="width: 254px;" v-model="ctrlType" placeholder="请选择">
      <el-option label="广播" :value="0"></el-option>
      <el-option label="组" :value="1"></el-option>
    </el-select>

    <div class="mb-4 mt-2" v-if="ctrlType==1">
      <label>组选择：</label>
      <el-select size="small" class="w190" v-model="groupNo">
        <el-option :value="-1" label="请选择"></el-option>
        <el-option v-for="(item,index) in geoups" :key="index" :value="index+1" :label="item"></el-option>
      </el-select>
    </div>

    <ul class="d-flex  flex-wrap tagGroup mt-3">
      <li v-for="index in 3" class="mr-4" style="font-size:16px;font-weight:500;margin-bottom: 10px;"
          :class="{active:lightNos.includes(index)}"  @click="lingtNosChnage(index)">
        <i class="iconfont icon-lamp mr-1"></i>{{index}}</li>
    </ul>

    <div class="d-flex align-items-center">
      <i class="iconfont icon-lamp-on mr-0" style="margin-left: -20px;"></i>
      <el-progress class="w200 dimmingLevel"  :text-inside="true" :stroke-width="20" :percentage="percentageVal"></el-progress>
<!--      <el-input v-model="percentageVal" size="small" class="w50 ml-3" ></el-input>-->
      <el-input-number v-model="percentageVal" controls-position="right" :min="0" :max="100" size="small" class="w80 ml-3"></el-input-number>
    </div>
  <!--  <el-input class="mr-3" style="width: 254px;" placeholder="请输入搜索内容" size="small" v-model="lightCtrTxt">
      <el-button slot="append" class="ur-btn ur-btn-search"><i class="iconfont icon-sousuo mr-0" style="width: 14px;height: 14px;"></i></el-button>
    </el-input>-->

    <div class="d-flex align-items-center mt-0">
      <ul class="onOffGroup  d-flex justify-content-around mr-3" @click="dimmingFun" :class="{'on':dimmingLevel==100,'off':dimmingLevel==0}">
        <li :class="{'notAllowed':btnState}" :style="{'visibility': dimmingLevel==100?'visible':'hidden'}">关</li>
        <li :class="{'notAllowed':btnState}" :style="{'visibility': dimmingLevel==0?'visible':'hidden'}">开</li>
      </ul>
      <el-button :disabled="btnState" class="ur-btn dimmingBtn ml-3" @click="lightDimming">调光</el-button>
    </div>

    <div v-if="results.length">
      <el-carousel style="line-height: 50px;overflow: hidden;" height="50px" direction="vertical" indicator-position="none" :interval="5000">
        <el-carousel-item v-for="(item,index) in results" :key="index">
          <label class="" :class="{'text-success':item.type==1,'text-danger':item.type==0}">
            <i class="iconfont " :class="{'icontrue':item.type==1,'iconfalse':item.type==0}"></i>
            {{item.message}}
          </label>
        </el-carousel-item>
      </el-carousel>
    </div>

  </div>
</template>

<script>
  import api from 'api/api'
  import {mapState} from 'vuex'

  export default {
    components: {},
    props: {
      selBoxs:{
        type:Array,
        default(){
          return []
        }
      }
    },
    data() {
      return {
        onOffType:2,
        lineObj:{1:'一',2:'二',3:'三',4:'四',5:'五',6:'六',7:'七',8:'八'},
        lineNos:[1,2],
        ctrlType:0,
        lightNos:[1,2],
        dimmingLevel:0,
        percentageVal:0,
        searchTxt:'',
        groupNo:-1,
        geoups:[],
        box:{},
        results:[]
      }
    },
    watch: {
      searchTxt(val){
        if(val==''){
          this.box={}
        }
      }
    },
    computed: {
      ...mapState({
        btnState: state => state.user.btnState,
      })
    },
    methods: {
      querySearch(queryString, cb) {
        if(queryString=='') return
        api.fetchSimple('/ViewInfo/SearchBoxInfo',{value:queryString})
            .then(r=>{
              queryString!=''?cb(r):cb()
            })
      },
      handleSelect(item) {
        this.searchTxt=item.Name
        this.box=item
        this.$emit('setMapCenter',{lnglat:[item.Lng,item.Lat]})
      },
      lingtNosChnage(index){
        if (this.lightNos.includes(index)) {
          let start = this.lightNos.indexOf(index)
          this.lightNos.splice(start, 1)
        } else {
          this.lightNos.push(index)
        }
      },
      lineSelect(index){
        if(this.lineNos.includes(index)){
          let start=this.lineNos.indexOf(index)
          this.lineNos.splice(start,1)
        }else{
          this.lineNos.push(index)
        }
      },
      //线控
      lineCtrl(state) {
        if(this.btnState) return //不能操作
        this.onOffType = state
        this.results=[]
        let lineStates=[]
        this.lineNos.map(line=>{
          lineStates.push(state)
        })
        if(!this.lineNos.length){
          return this.$message.warning('请勾选线路')
        }
        if(this.searchTxt!=''&&this.box.BoxId){//搜索后控制
          this.lineCtrlFun(this.box,0,[this.box],lineStates)
        }else {
          this.lineCtrlFun(this.selBoxs[0],0,this.selBoxs,lineStates)
        }
      },
      lineCtrlFun(box,index,boxs,lineStates){
        if(box==undefined||this.common.isEmpty(box)) return this.$message.error({showClose:true,message:'无设备控制'})
        let curIndex=index
        this.$store.commit('user/SET_BTN_STATE',true)
        api.fetchSimple('/Communication/LineControl',{EccAddr:box.Addr||box.EccAddr,LineNos:this.lineNos,LineStates:lineStates})
            .then(r=>{
              this.$store.commit('user/SET_BTN_STATE',false)
              if (r.CmdState == 0) {
                let txt=this.onOffType==1?'线控开灯成功':'线控关灯成功'
                this.results.push({type:1,message: box.Name+txt})
                // this.$message.success({showClose:true,message:'开灯成功!'})
              } else {
                this.results.push({type:0,message: box.Name+this.global.cmdStatus[r.CmdState]})
                // this.$message.error({showClose:true,message:this.global.cmdStatus[r.CmdState]})
              }
              curIndex++
              if(curIndex<boxs.length){
                this.lineCtrlFun(boxs[curIndex],curIndex,boxs,lineStates)
              }else{
                this.$store.commit('user/SET_BTN_STATE',false)
                // this.$message.success('线控'+(this.onOffType==0?'全关':'全开')+'控制操作结束')
              }
            })
      },
      //控制
      dimmingFun(val){
        if(this.btnState) return //不能操作
        this.dimmingLevel=this.dimmingLevel==0?100:0
        this.percentageVal=this.percentageVal==0?100:0
        // this.dimmingLevel=val
        // this.percentageVal=val
        this.results=[]
        this.$store.commit('user/SET_BTN_STATE',true)
        if(this.dimmingLevel==0){
          if(this.searchTxt!=''&&this.box.BoxId){//搜索后控制
            this.lightOffFun(this.box,0,[this.box])
          }else {
            this.lightOffFun(this.selBoxs[0],0,this.selBoxs)
          }
        }else if(this.dimmingLevel==100){
          if(this.searchTxt!=''&&this.box.BoxId){//搜索后控制
            this.lightOnFun(this.box,0,[this.box])
          }else {
            this.lightOnFun(this.selBoxs[0],0,this.selBoxs)
          }
        }
      },
      lightOnFun(box,index,boxs){
        if(box==undefined||this.common.isEmpty(box)) return this.$message.error({showClose:true,message:'无设备控制'})
        let curIndex=index
        let url,params=''
        if(this.ctrlType==0){//广播
          url="/Communication/LightOnAll"
          params={EccAddr:box.Addr||box.EccAddr,LightNos:this.lightNos}
        }
        else{//组
          if (this.groupNo == -1) return this.$message.warning('请选择分组')
          url = "/Communication/LightOnGroup"
          params = {EccAddr: box.Addr||box.EccAddr, LightNos: this.lightNos, GroupNo: this.groupNo}
        }
        api.fetchSimple(url,params)
            .then(r=>{
             // if(boxs.length==1){} else{批量}
              if (r.CmdState == 0) {
                this.results.push({type:1,message: box.Name+'开灯成功'})
                // this.$message.success({showClose:true,message:'开灯成功!'})
              } else {
                this.results.push({type:0,message: box.Name+this.global.cmdStatus[r.CmdState]})
                // this.$message.error({showClose:true,message:this.global.cmdStatus[r.CmdState]})
              }
              curIndex++
              if(curIndex<boxs.length){
                this.lightOnFun(this.selBoxs[curIndex],curIndex,boxs)
              }else{
                this.$store.commit('user/SET_BTN_STATE',false)
                // this.$message.success({showClose:true,message:'批量操作开灯结束!'})
              }
            })
      },
      lightOffFun(box,index,boxs){
        let curIndex=index
        let url,params=''
        if(this.ctrlType==0){//广播
          url="/Communication/LightOffAll"
          params={EccAddr:box.Addr||box.EccAddr,LightNos:this.lightNos}
        }
        else{//组
          if (this.groupNo == -1) return this.$message.warning('请选择分组')
          url = "/Communication/LightOffGroup"
          params = {EccAddr: box.Addr||box.EccAddr, LightNos: this.lightNos, GroupNo: this.groupNo}
        }
        api.fetchSimple(url,params)
            .then(r=>{
              if (r.CmdState == 0) {
                this.results.push({type:1,message: box.Name+'关灯成功'})
                // this.$message.success({showClose:true,message:'关灯成功!'})
              } else {
                this.results.push({type:0,message: box.Name+this.global.cmdStatus[r.CmdState]})
                // this.$message.error({showClose:true,message:this.global.cmdStatus[r.CmdState]})
              }
              curIndex++
              if(curIndex<boxs.length){
                this.lightOffFun(this.selBoxs[curIndex],curIndex,boxs)
              }else{
                this.$store.commit('user/SET_BTN_STATE',false)
                // this.$message.success({showClose:true,message:'批量操作开灯结束!'})
              }
            })
      },
      lightDimming(){
        this.results=[]
        if(this.searchTxt!=''&&this.box.BoxId){//搜索后控制
          this.lightDimmingFun(this.box,0,[this.box])
        }else {
          this.lightDimmingFun(this.selBoxs[0],0,this.selBoxs)
        }
      },
      lightDimmingFun(box,index,boxs){
        if(box==undefined||this.common.isEmpty(box)) return this.$message.error({showClose:true,message:'无设备控制'})
        let curIndex=index
        let url,params=''
        if(this.ctrlType==0){//广播
          url="/Communication/LightDimmingAll"
          params={EccAddr:box.Addr||box.EccAddr,LightNos:this.lightNos,LightLevel:(this.percentageVal/5).toFixed(0)}
        }
        else{//组
          if (this.groupNo == -1) return this.$message.warning('请选择分组')
          url = "/Communication/LightDimmingGroup"
          params = {EccAddr: box.Addr||box.EccAddr, LightNos: this.lightNos, GroupNo: this.groupNo,LightLevel:(this.percentageVal/5).toFixed(0)}
        }
        api.fetchSimple(url,params)
            .then(r=>{
              if (r.CmdState == 0) {
                this.results.push({type:1,message: box.Name+'调光成功'})
                // this.$message.success({showClose:true,message:'调光成功!'})
              } else {
                this.results.push({type:0,message: box.Name+this.global.cmdStatus[r.CmdState]})
                // this.$message.error({showClose:true,message:this.global.cmdStatus[r.CmdState]})
              }
              curIndex++
              if(curIndex<boxs.length){
                this.lightDimmingFun(this.selBoxs[curIndex],curIndex,boxs)
              }else{
                this.$store.commit('user/SET_BTN_STATE',false)
                // this.$message.success({showClose:true,message:'批量操作开灯结束!'})
              }
            })
      }
    },
    created() {
      this.$store.commit('user/SET_BTN_STATE',false)
      for (var i = 1; i < 16; i++) {
        if (i < 10) {
          this.geoups.push('组0' + i)
        }else{
          this.geoups.push('组' + i)
        }
      }
    },
    mounted() {
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
 /* .switchGroup{width :164px;height 32px;cursor:pointer;
    &.switchBg2{background :url("~static/image/comm/onOffSwitch2.png") no-repeat center;}
    &.switchBg0{background :url("~static/image/comm/onOffSwitch0.png") no-repeat center;}
    &.switchBg1{background :url("~static/image/comm/onOffSwitch1.png") no-repeat center;}
  }*/
  .tagGroup{
    li{/*url("~static/image/comm/line_bg.png") no-repeat*/
      width:74px;height:40px;line-height:40px;text-align:center;color:#6B82CB;margin:0 15px 20px 0;background: rgba(49, 62, 92,.2);
      &:nth-child(4n){margin-right :0}
      &.active{
        background:url("~static/image/comm/line_active_bg.png") no-repeat;color:#fff;
        .icon-lamp{background:url("~static/image/comm/icon-lamp_active.png") no-repeat;}
      }
      &:not(.active):hover{color:#9FB2EF;background:rgba(49, 62, 92,.3) url("~static/image/comm/btn_bg.png") no-repeat;background-position :center center; }
    }
  }
  .ur-btn-search{width:32px;height 32px;background :#313E5C;}
  .dimmingLevel{margin-left :-15px;
    .el-progress-bar__inner{background:linear-gradient(270deg,rgba(237,116,48,1) 0%,rgba(201,168,76,1) 100%);}
    .el-progress-bar__outer{background:rgba(44,62,103,1)}
  }
  .dimmingBtn{
    width:74px; height:32px; background:rgba(49,62,92,0.5); border-radius:4px;color :#fff;text-align:center;line-height :30px;cursor :pointer;
    &:hover{background:rgba(49,62,92,0.6);}
    &:focus{background:rgba(49,62,92,0.8);}
  }
  .onOffGroup{width 74px;height 32px;line-height:32px;color:#fff;
    &.on{background:url("~static/image/comm/switchOn.png") no-repeat;}
    &.off{background:url("~static/image/comm/switchOff.png") no-repeat;}
  }
</style>
